/**
 * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
 * Copyright (c) <spug.dev@gmail.com>
 * Released under the AGPL-3.0 License.
 */
import React,{Fragment} from 'react';
import { observer } from 'mobx-react';
import {Table, Divider, Modal, message, Dropdown, Icon, Menu} from 'antd';
import { LinkButton } from 'components';
import http from 'libs/http';
import store from './store';

@observer
class ComTable extends React.Component {



  columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 80
    },
    {
      title: '输入框',
      dataIndex: 'input',
      sorter:true
    },
    {
        title: '多行输入框',
        dataIndex: 'mul_input',
        sorter:true
    },
    {
      title: '下拉选择框',
      dataIndex: 'dropdown_list',
        sorter:true
    },
    {
      title: '下拉选择框-多选',
      dataIndex: 'mul_dropdown_list',
        sorter:true
    },
    {
      title: '时间选择器',
      dataIndex: 'date_picker',
        sorter:true
    },
    {
      title: 'file',
      dataIndex: '单文件上传',
        sorter:true
    },
    {
      title: '多文件上传',
      dataIndex: 'mul_file',
        sorter:true
    },
    {
      title: '富文本',
      dataIndex: 'rich_text',
        sorter:true
    },
    {
      title: '单选框1',
      dataIndex: 'check_box',
        sorter:true
    },
    {
      title: '单选框2',
      dataIndex: 'radio_list',
        sorter:true
    },
    {
      title: '多选框',
      dataIndex: 'check_box_list',
        sorter:true
    },
    {
      title: '经纬度选择器',
      dataIndex: 'lng_lat',
        sorter:true
    },
    {
      title: '密码框',
      dataIndex: 'password',
        sorter:true
    },
    {
        title: '操作',
        width: 200,
        render: (info) => (
          <span>
            <LinkButton auth="host.host.edit" onClick={() => store.showForm(info)}>查看</LinkButton>
            <Divider type="vertical"/>
            <LinkButton auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
            <Divider type="vertical"/>
            <LinkButton auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
            <Divider type="vertical"/>
             <Dropdown overlay={() => this.moreMenus(info)} trigger={['click']}>
              <LinkButton>
                更多 <Icon type="down"/>
              </LinkButton>
            </Dropdown>
          </span>
        )
   }];
    moreMenus = (info) => (
        <Menu>
            <Menu.Item>
                <LinkButton>执行测试</LinkButton>
            </Menu.Item>
            <Menu.Item>
                <LinkButton>历史记录</LinkButton>
            </Menu.Item>
            <Menu.Divider/>
            <Menu.Item>
                <LinkButton auth="schedule.schedule.del">删除</LinkButton>
            </Menu.Item>
        </Menu>
    );
  handleConsole = (info) => {
    window.open(`/ssh/${info.id}`)
  };

  handleDelete = (text) => {
    Modal.confirm({
      title: '删除确认',
      content: `确定要删除【${text['name']}】?`,
      onOk: () => {
        return http.delete('/api/host/', {params: {id: text.id}})
          .then(() => {
            message.success('删除成功');
            store.fetchRecords()
          })
      }
    })
  };

    // 处理多选数据行
    rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
    };

    //处理排序
    onChange = (pagination, filters, sorter, extra) => {
        store.filterMap["sort"] = (sorter.order === "descend" ? "-" : "") + sorter.field;
        store.fetchRecords();
    };

    render() {
    return (
      <Fragment>
        <Table
            rowSelection={this.rowSelection}
            onChange={this.onChange}
            rowKey="id"
            loading={store.isFetching}
            dataSource={store.records}
            pagination={{
              showSizeChanger: true,
              showLessItems: true,
              hideOnSinglePage: true,
              pageSizeOptions: ['10', '20', '50', '100']
            }}
            columns={store.tableConfig.columns}/>
      </Fragment>
    )
  }
}

export default ComTable
